<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<form
  [formGroup]="form"
  novalidate
>
  <kd-help-section>
    <mat-form-field>
      <input
        matInput
        formControlName="name"
        placeholder="App name"
        i18n-placeholder
        [maxlength]="nameMaxLength"
        [namespace]="namespace.value"
        kdUniqueName
        required
      />
      <mat-progress-bar
        class="kd-deploy-form-progress"
        [ngClass]="{'kd-deploy-form-progress-show': name.pending}"
        mode="indeterminate"
      >
      </mat-progress-bar>
      <mat-hint align="end">{{ name.value?.length }} / {{ nameMaxLength }}</mat-hint>
      <mat-error
        *ngIf="name.errors?.uniqueName"
        i18n
      >
        Deployment or service with this name already exists within namespace.
      </mat-error>
      <mat-error
        *ngIf="name.errors?.required"
        i18n
      >
        Application name is required.
      </mat-error>
      <mat-error
        *ngIf="name.errors?.namePattern"
        i18n
      >
        Application name must start with a lowercase letter and contain only lowercase letters, numbers, and '-' between
        words.
      </mat-error>
    </mat-form-field>

    <kd-user-help>
      <ng-container i18n
        >An 'app' label with this value will be added to the Deployment and Service that get deployed.</ng-container
      >
      <a
        href="https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/"
        target="_blank"
        tabindex="-1"
        i18n
      >
        Learn more
        <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <mat-form-field>
      <input
        matInput
        formControlName="containerImage"
        placeholder="Container image"
        i18n-placeholder
        kdValidImageReference
        required
      />
      <mat-error
        *ngIf="containerImage.errors?.required"
        i18n
      >
        Container image is required
      </mat-error>
      <mat-error
        *ngIf="containerImage.errors?.validImageReference"
        i18n
      >
        Container image is invalid: {{ containerImage.errors?.validImageReference }}
      </mat-error>
    </mat-form-field>

    <kd-user-help>
      <ng-container i18n
        >Enter the URL of a public image on any registry, or a private image hosted on Docker Hub or Google Container
        Registry.</ng-container
      >
      <a
        href="https://kubernetes.io/docs/concepts/containers/images/"
        target="_blank"
        tabindex="-1"
        i18n
      >
        Learn more
        <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <mat-form-field>
      <input
        matInput
        type="number"
        formControlName="replicas"
        placeholder="Number of pods"
        i18n-placeholder
        min="1"
        kdWarnThreshold="100"
        required
      />
      <mat-error
        *ngIf="replicas.errors?.required"
        i18n
      >
        Number of pods is required
      </mat-error>
      <mat-error
        *ngIf="replicas.errors?.kdValidInteger"
        i18n
      >
        Number of pods must be a positive integer
      </mat-error>
      <!-- <mat-error when="min">[[Number of pods must be at least 1|Number of pods must be at least 1 warning on deploy from settings page.]]</mat-error> -->
      <mat-error
        *ngIf="replicas.errors?.warnThreshold"
        i18n
      >
        Setting high number of pods may cause performance issues of the cluster and Dashboard UI.
      </mat-error>
    </mat-form-field>
    <kd-user-help>
      <ng-container i18n
        >A Deployment will be created to maintain the desired number of pods across your cluster.</ng-container
      >
      <a
        href="https://kubernetes.io/docs/concepts/workloads/controllers/deployment/"
        target="_blank"
        tabindex="-1"
        i18n
      >
        Learn more
        <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <div fxLayout="column">
      <kd-port-mappings
        [protocols]="protocols"
        [isExternal]="isExternal"
        (changeExternal)="changeExternal($event)"
        formControlName="portMappings"
      >
      </kd-port-mappings>
    </div>
    <kd-user-help>
      <ng-container i18n
        >Optionally, an internal or external Service can be defined to map an incoming Port to a target Port seen by the
        container.</ng-container
      >
      <a
        href="https://kubernetes.io/docs/concepts/services-networking/service/"
        target="_blank"
        tabindex="-1"
        i18n
      >
        Learn more
        <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <mat-form-field>
      <mat-select
        formControlName="namespace"
        (click)="resetImagePullSecret()"
        placeholder="Namespace"
        i18n-placeholder
        required
      >
        <mat-option
          *ngFor="let namespace of namespaces"
          [value]="namespace"
        >
          {{ namespace }}
        </mat-option>
        <mat-option
          (click)="handleNamespaceDialog()"
          i18n
        >
          Create a new namespace...
        </mat-option>
      </mat-select>
    </mat-form-field>
    <kd-user-help>
      <ng-container i18n>Namespaces let you partition resources into logically named groups.</ng-container>
      <a
        href="https://kubernetes.io/docs/admin/namespaces/"
        target="_blank"
        tabindex="-1"
        i18n
      >
        Learn more
        <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <!-- advanced options -->
  <div [hidden]="!isMoreOptionsEnabled()">
    <kd-help-section>
      <mat-form-field>
        <textarea
          formControlName="description"
          matInput
          placeholder="Description"
          i18n-placeholder
        ></textarea>
      </mat-form-field>
      <kd-user-help i18n>
        The description will be added as an annotation to the Deployment and displayed in the application's details.
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div fxLayout="column">
        <div
          class="kd-margin-bottom"
          i18n
        >
          Labels
        </div>
        <kd-deploy-label
          [labelArr]="labelArr"
          formControlName="labels"
        ></kd-deploy-label>
      </div>
      <kd-user-help>
        <ng-container i18n
          >The specified labels will be applied to the created Deployment, Service (if any) and Pods. Common labels
          include release, environment, tier, partition and track.</ng-container
        >
        <a
          href="https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <mat-form-field>
        <mat-select
          formControlName="imagePullSecret"
          (click)="getSecrets()"
          placeholder="Image Pull Secret"
          i18n-placeholder
        >
          <mat-option
            *ngFor="let secret of secrets"
            [value]="secret"
          >
            {{ secret }}
          </mat-option>
          <mat-option
            (click)="handleCreateSecretDialog()"
            i18n
          >
            Create a new secret...
          </mat-option>
        </mat-select>
      </mat-form-field>
      <kd-user-help>
        <ng-container i18n
          >The specified image could require a pull secret credential if it is private. You may choose an existing
          secret or create a new one.</ng-container
        >
        <a
          href="https://kubernetes.io/docs/concepts/configuration/secret/"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div fxLayout="row">
        <mat-form-field fxFlex="auto">
          <input
            matInput
            type="number"
            placeholder="CPU requirement (cores)"
            i18n-placeholder
            name="cpuRequirement"
            min="0"
            formControlName="cpuRequirement"
          />
          <mat-error
            *ngIf="cpuRequirement.errors?.min"
            i18n
          >
            CPU requirement must be given as a positive number.
          </mat-error>
          <mat-error
            *ngIf="cpuRequirement.errors?.kdValidInteger"
            i18n
          >
            CPU requirement must be given as a valid number.
          </mat-error>
        </mat-form-field>
        <div fxFlex="5"></div>
        <mat-form-field fxFlex="auto">
          <input
            matInput
            type="number"
            placeholder="Memory requirement (MiB)"
            i18n-placeholder
            name="memoryRequirement"
            min="0"
            formControlName="memoryRequirement"
          />
          <mat-error
            *ngIf="memoryRequirement.errors?.min"
            i18n
          >
            Memory requirement must be given as a positive number.
          </mat-error>
          <mat-error
            *ngIf="memoryRequirement.errors?.kdValidInteger"
            i18n
          >
            Memory requirement must be given as a valid number.
          </mat-error>
        </mat-form-field>
      </div>
      <kd-user-help>
        <ng-container i18n>You can specify minimum CPU and memory requirements for the container.</ng-container>
        <a
          href="https://kubernetes.io/docs/admin/limitrange/"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div>
        <mat-form-field class="kd-block">
          <input
            matInput
            placeholder="Run command"
            i18n-placeholder
            formControlName="containerCommand"
          />
        </mat-form-field>
        <mat-form-field class="kd-block">
          <input
            matInput
            placeholder="Run command arguments"
            i18n-placeholder
            formControlName="containerCommandArgs"
          />
        </mat-form-field>
      </div>
      <kd-user-help>
        <ng-container i18n
          >By default, your containers run the selected image's default entrypoint command. You can use the command
          options to override the default.</ng-container
        >
        <a
          href="https://kubernetes.io/docs/tasks/inject-data-application/define-command-argument-container/"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div class="kd-block">
        <mat-checkbox
          color="primary"
          formControlName="runAsPrivileged"
          i18n
          >Run as privileged</mat-checkbox
        >
      </div>
      <kd-user-help>
        <ng-container i18n
          >Processes in privileged containers are equivalent to processes running as root on the host.</ng-container
        >
        <a
          href="https://kubernetes.io/docs/concepts/workloads/pods/#privileged-mode-for-containers"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <kd-environment-variables formControlName="variables"></kd-environment-variables>
      <kd-user-help>
        <ng-container i18n
          >Environment variables available for use in the container. Values can reference other variables using
          $(VAR_NAME) syntax.</ng-container
        >
        <a
          href="https://kubernetes.io/docs/tasks/inject-data-application/define-environment-variable-container/"
          target="_blank"
          tabindex="-1"
          i18n
        >
          Learn more
          <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>
  </div>
</form>

<button
  type="button"
  [disabled]="isCreateDisabled()"
  color="primary"
  mat-raised-button
  (click)="deploy()"
  i18n
>
  Deploy
</button>

<button
  type="button"
  [disabled]="isCreateDisabled()"
  color="primary"
  (click)="preview()"
  mat-button
  i18n
>
  Preview
</button>

<button
  type="button"
  (click)="cancel()"
  color="primary"
  mat-button
  i18n
>
  Cancel
</button>

<button
  mat-button
  color="primary"
  (click)="switchMoreOptions()"
  [hidden]="!isMoreOptionsEnabled()"
  i18n
>
  {isMoreOptionsEnabled(), select, true {Hide advanced options} other {Show advanced options}}
</button>
